<template>
  <section class="thm-gray-bg course-category-one">
      <div class="container-fluid text-center">
          <div class="block-title text-center">
              <h2 class="block-title__title">Browse online <br>
                  course categories</h2><!-- /.block-title__title -->
          </div><!-- /.block-title -->
          <div class="course-category-one__carousel owl-carousel owl-theme">
              <div class="item">
                  <div class="course-category-one__single color-1">
                      <div class="course-category-one__icon">
                          <i class="kipso-icon-desktop"></i><!-- /.kipso-icon-camera -->
                      </div><!-- /.course-category-one__icon -->
                      <h3 class="course-category-one__title"><a href="#">IT & Software</a></h3>
                      <!-- /.course-category-one__title -->
                  </div><!-- /.course-category-one__single -->
              </div><!-- /.item -->
              <div class="item">
                  <div class="course-category-one__single color-2">
                      <div class="course-category-one__icon">
                          <i class="kipso-icon-web-programming"></i><!-- /.kipso-icon-camera -->
                      </div><!-- /.course-category-one__icon -->
                      <h3 class="course-category-one__title"><a href="#">Development</a></h3>
                      <!-- /.course-category-one__title -->
                  </div><!-- /.course-category-one__single -->
              </div><!-- /.item -->
              <div class="item">
                  <div class="course-category-one__single color-3">
                      <div class="course-category-one__icon">
                          <i class="kipso-icon-music-player"></i><!-- /.kipso-icon-camera -->
                      </div><!-- /.course-category-one__icon -->
                      <h3 class="course-category-one__title"><a href="#">Music</a></h3>
                      <!-- /.course-category-one__title -->
                  </div><!-- /.course-category-one__single -->
              </div><!-- /.item -->
              <div class="item">
                  <div class="course-category-one__single color-4">
                      <div class="course-category-one__icon">
                          <i class="kipso-icon-camera"></i><!-- /.kipso-icon-camera -->
                      </div><!-- /.course-category-one__icon -->
                      <h3 class="course-category-one__title"><a href="#">Photography</a></h3>
                      <!-- /.course-category-one__title -->
                  </div><!-- /.course-category-one__single -->
              </div><!-- /.item -->
              <div class="item">
                  <div class="course-category-one__single color-5">
                      <div class="course-category-one__icon">
                          <i class="kipso-icon-targeting"></i><!-- /.kipso-icon-camera -->
                      </div><!-- /.course-category-one__icon -->
                      <h3 class="course-category-one__title"><a href="#">Marketing</a></h3>
                      <!-- /.course-category-one__title -->
                  </div><!-- /.course-category-one__single -->
              </div><!-- /.item -->
              <div class="item">
                  <div class="course-category-one__single color-6">
                      <div class="course-category-one__icon">
                          <i class="kipso-icon-health"></i><!-- /.kipso-icon-camera -->
                      </div><!-- /.course-category-one__icon -->
                      <h3 class="course-category-one__title"><a href="#">Health & Fitness</a></h3>
                      <!-- /.course-category-one__title -->
                  </div><!-- /.course-category-one__single -->
              </div><!-- /.item -->
              <div class="item">
                  <div class="course-category-one__single color-1">
                      <div class="course-category-one__icon">
                          <i class="kipso-icon-desktop"></i><!-- /.kipso-icon-camera -->
                      </div><!-- /.course-category-one__icon -->
                      <h3 class="course-category-one__title"><a href="#">IT & Software</a></h3>
                      <!-- /.course-category-one__title -->
                  </div><!-- /.course-category-one__single -->
              </div><!-- /.item -->
              <div class="item">
                  <div class="course-category-one__single color-2">
                      <div class="course-category-one__icon">
                          <i class="kipso-icon-web-programming"></i><!-- /.kipso-icon-camera -->
                      </div><!-- /.course-category-one__icon -->
                      <h3 class="course-category-one__title"><a href="#">Development</a></h3>
                      <!-- /.course-category-one__title -->
                  </div><!-- /.course-category-one__single -->
              </div><!-- /.item -->
              <div class="item">
                  <div class="course-category-one__single color-3">
                      <div class="course-category-one__icon">
                          <i class="kipso-icon-music-player"></i><!-- /.kipso-icon-camera -->
                      </div><!-- /.course-category-one__icon -->
                      <h3 class="course-category-one__title"><a href="#">Music</a></h3>
                      <!-- /.course-category-one__title -->
                  </div><!-- /.course-category-one__single -->
              </div><!-- /.item -->
              <div class="item">
                  <div class="course-category-one__single color-4">
                      <div class="course-category-one__icon">
                          <i class="kipso-icon-camera"></i><!-- /.kipso-icon-camera -->
                      </div><!-- /.course-category-one__icon -->
                      <h3 class="course-category-one__title"><a href="#">Photography</a></h3>
                      <!-- /.course-category-one__title -->
                  </div><!-- /.course-category-one__single -->
              </div><!-- /.item -->
          </div><!-- /.course-category-one__carousel owl-carousel owl-theme -->

          <a href="#" class="thm-btn">View All Categories</a><!-- /.thm-btn -->
      </div><!-- /.container-fluid -->
  </section>
</template>

<script>
    export default {
        name: "CourseCategory"
    }
</script>

<style scoped>

</style>
